/*
 * @Author: taoyuqing
 * @Date: 2023-02-26 17:04:16
 * @Description: 
 */
import 'package:flutter/material.dart';
import 'package:spree/utils/utils.dart';
import 'package:spree/widgets/common_container.dart';

import '../../rules_banner.dart';

class CrashRules extends StatefulWidget {
  CrashRules({Key? key}) : super(key: key);

  @override
  State<CrashRules> createState() => _CrashRulesState();
}

class _CrashRulesState extends State<CrashRules> with TickerProviderStateMixin {
  int _curIndex = 0;
  late TabController _tabController;
  final GlobalKey<RulesBannerState> _globalKey = GlobalKey();
  List _tabs = ["Rules", "Limites"];
  int _fIndex = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CommonContainer(
        child: ListView(
          padding: EdgeInsets.only(top: 20, bottom: 20),
          children: [
            TabBar(
              controller: _tabController,
              tabs: _tabs.map((e) => Tab(text: e)).toList(),
              onTap: (i) {
                setState(() {
                  _fIndex = i;
                });
              },
            ),
            _fIndex == 0
                ? Column(
                    children: [
                      RulesBanner(
                        key: _globalKey,
                        index: _curIndex,
                        onchange: (i) {
                          setState(() {
                            _curIndex = i;
                          });
                        },
                        height: 420,
                        imageList: [
                          Column(
                            children: [
                              Stack(
                                children: [
                                  Container(
                                    height: 240,
                                    decoration: BoxDecoration(
                                        color: Utils().createMaterialColor(),
                                        image: const DecorationImage(
                                            image: AssetImage(
                                              'images/games/crash/background.png',
                                            ),
                                            fit: BoxFit.fill)),
                                  ),
                                  Positioned(
                                      child: Container(
                                    margin: EdgeInsets.only(top: 40),
                                    width: Utils().getScreenWidth(context),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        const Text(
                                          'Starts in 3.23 s',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 30,
                                              fontWeight: FontWeight.w800),
                                        ),
                                        const Text(
                                          'Place your Bet',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 12,
                                              fontWeight: FontWeight.w800),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(top: 10),
                                          width: 150,
                                          child: const ClipRRect(
                                            // 边界半径（`borderRadius`）属性，圆角的边界半径。
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(10.0)),
                                            child: LinearProgressIndicator(
                                              value: 0.3,
                                              minHeight: 4,
                                              backgroundColor:
                                                  Color(0xff4F5E79),
                                              valueColor:
                                                  AlwaysStoppedAnimation<Color>(
                                                      Color(0xffF645FF)),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  )),
                                  Positioned(
                                      bottom: 30,
                                      left: 30,
                                      child: Image.asset(
                                        'images/games/crash/crash.png',
                                        width: 100,
                                      ))
                                ],
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 20, bottom: 20),
                                child: Text(
                                  'Before the countdown ends Press "Bet" and follow the rocket\'s flight.',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700),
                                ),
                              ),
                              Container(
                                height: 60,
                                child: ElevatedButton(
                                    style: ButtonStyle(
                                      backgroundColor:
                                          MaterialStateProperty.all(
                                              Color(0xFFF93C56)),
                                    ),
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                    child: Text('To Bet')),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Stack(
                                children: [
                                  Container(
                                    height: 240,
                                    decoration: BoxDecoration(
                                        color: Utils().createMaterialColor(),
                                        image: const DecorationImage(
                                            image: AssetImage(
                                              'images/games/crash/background.png',
                                            ),
                                            fit: BoxFit.fill)),
                                  ),
                                  Positioned(
                                      child: Container(
                                    margin: EdgeInsets.only(top: 40),
                                    width: Utils().getScreenWidth(context),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        const Text(
                                          'Starts in 3.23 s',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 30,
                                              fontWeight: FontWeight.w800),
                                        ),
                                        const Text(
                                          'Place your Bet',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 12,
                                              fontWeight: FontWeight.w800),
                                        ),
                                        Container(
                                          margin: EdgeInsets.only(top: 10),
                                          width: 150,
                                          child: const ClipRRect(
                                            // 边界半径（`borderRadius`）属性，圆角的边界半径。
                                            borderRadius: BorderRadius.all(
                                                Radius.circular(10.0)),
                                            child: LinearProgressIndicator(
                                              value: 0.3,
                                              minHeight: 4,
                                              backgroundColor:
                                                  Color(0xff4F5E79),
                                              valueColor:
                                                  AlwaysStoppedAnimation<Color>(
                                                      Color(0xffF645FF)),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                  )),
                                  Positioned(
                                      bottom: 30,
                                      left: 30,
                                      child: Image.asset(
                                        'images/games/crash/crash.png',
                                        width: 100,
                                      ))
                                ],
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 20, bottom: 20),
                                child: Text(
                                  'Withdraw funds before the explosion of the rocket in space so as not to lose the bet.',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700),
                                ),
                              ),
                              Container(
                                height: 60,
                                child: ElevatedButton(
                                    style: ButtonStyle(
                                      backgroundColor:
                                          MaterialStateProperty.all(
                                              Color(0xFFF93C56)),
                                    ),
                                    onPressed: () {
                                      Navigator.pop(context);
                                    },
                                    child: Text('Withdraw')),
                              ),
                            ],
                          ),
                        ],
                      ),
                      _curIndex == 1
                          ? Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                  child: Text('Start the game')),
                            )
                          : Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    _globalKey.currentState?.jumpToPage(1);
                                    setState(() {
                                      _curIndex = 1;
                                    });
                                  },
                                  child: Text('Next')),
                            ),
                    ],
                  )
                : Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Bet:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 2,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Payment:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 4,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      )
                    ],
                  )
          ],
        ),
      ),
    );
  }
}
